<template>
  <div :style="showMobilePage?'width: calc(100vw-24px)':''" :class="{'need-pd': needPadding}" class="order-list-item">
    <div v-if="createOrder" class="list-title" style="padding-bottom: 12px;">新增订单</div>
    <div :style="headerStyle" class="order-header">
      <div v-if="!createOrder" class="content"><OrderText :order-status="Number(data.status)" /></div>
      <div :class="createOrder ? 'content' : 'content content-1250'">{{ createOrder ? '关联询单号：' : '询单号：' }}{{ data.orderNum }}</div>
      <div v-if="data.createTime " :class="createOrder ? 'content' : 'content content-1250'" style="margin-right: 0;">创建时间：{{ data.createTime | parseTime }}</div>
      <div v-if="!createOrder" class="content resource-content">已有{{ data.resourceNum || '--' }}个达人</div>
      <div class="empty"/>
      <div v-if="createOrder" class="create-order" @click="createOrderBatch">提交订单</div>
      <div v-if="!isShowBtn && !createOrder" class="go-detail" @click="goDetail(data.id)">查看详情 <img :src="detailIcon" class="detail-icon" alt=""></div>
      <div v-else class="btn-container">
        <template v-if="(isSaleUser || isAdminUser) && !createOrder">
          <div v-if="orderStatus === 1" class="select-text" >共选择了{{ selectNum }}个达人</div>
          <!-- 导出按钮 -->
          <export-button
            v-if="orderStatus === 1 || orderStatus === 2 || orderStatus === 3"
            ref="exportButton"
            :query-data="exportParams"
            :export-api="'/admin/medium/orderdetail/export'"
            :export-name-last="data.brandName"
            export-name="询单详情"
            is-diy
            is-before-export
            @beforeExport="beforeExport"
            @onComplate="completeExport"
          >
            <el-button :style="mediumBtnStyle" size="small">导出</el-button>
          </export-button>
          <div v-if="orderStatus === 1" class="btn" @click="$emit('submitOrder')">提交</div>
          <div v-if="orderStatus === 1" class="btn danger" @click="$emit('closeOrder')">关闭</div>
        </template>
      </div>
    </div>
    <!-- :class="{'border-bottom': isDetail}" -->
    <div class="order-table">
      <el-table
        :data="[data]"
        class="creat-order-table"
        row-class-name="order-table-row"
        header-cell-class-name="medium-order-table-header-cell"
        style="width: 100%">
        <el-table-column v-if="isShowCheck && isDetail" align="left" label="品牌名称" width="80">
          <template slot="header" slot-scope="scope">
            <div class="title"><el-checkbox v-model="checked" class="order-checkbox" @change="selectAll">全选</el-checkbox></div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="创建人" min-width="80">
          <template slot="header" slot-scope="scope">
            <div class="title"><img src="../../../assets/medium/title-time.png" class="title-icon" alt=""> 创建人</div>
          </template>
          <template slot-scope="scope">
            <div class="name ">
              <div class="overflowtext">{{ scope.row.creator || '--' }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="品牌名称" min-width="130">
          <template slot="header" slot-scope="scope">
            <div class="title"><img src="../../../assets/medium/brand_name.png" class="title-icon" alt=""> 品牌名称</div>
          </template>
          <template slot-scope="scope">
            <div class="name ">
              <ToolTip :content="scope.row.brandName">
                <div class="remarks">{{ scope.row.brandName }}</div>
              </ToolTip>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="需求内容" min-width="120">
          <template slot="header" slot-scope="scope">
            <div class="title"><img src="../../../assets/medium/title-remark.png" class="title-icon" alt=""> 需求内容</div>
          </template>
          <template slot-scope="scope">
            <div class="name">
              <ToolTip :content="scope.row.content">
                <div class="remarks">{{ scope.row.content }}</div>
              </ToolTip>
              <img v-if="isShowEdit" :src="editRemark" class="remark-icon" alt="" @click="toEditRequireContent(scope.row.content)">
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="时间" min-width="220">
          <template slot="header" slot-scope="scope">
            <div class="title"><img src="../../../assets/medium/date@2x.png" class="title-icon" alt=""> 时间</div>
          </template>
          <template slot-scope="scope">
            <div class="name" style="flex-direction: column;justify-content: center;align-items: start;">
              {{ scope.row.startTime | parseTime('{y}/{m}/{d}') }} - {{ scope.row.endTime | parseTime('{y}/{m}/{d}') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="响应时间" min-width="180">
          <template slot="header" slot-scope="scope">
            <div class="title"><img src="../../../assets/medium/reseponse-time.png" class="title-icon" alt=""> 响应时间</div>
          </template>
          <template slot-scope="scope">
            <div class="name">
              {{ scope.row.responseTime | parseTime('{y}/{m}/{d} {h}:{i}') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="备注" min-width="120">
          <template slot="header" slot-scope="scope">
            <div class="title"><img src="../../../assets/medium/title-remark.png" class="title-icon" alt=""> 备注</div>
          </template>
          <template slot-scope="scope">
            <div class="name">
              <ToolTip :content="scope.row.remarks">
                <div class="remarks">{{ scope.row.remarks }}</div>
              </ToolTip>
              <img v-if="isShowEdit" :src="editRemark" class="remark-icon" alt="" @click="toEditShow(scope.row.remarks)">
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="超链接" min-width="130">
          <template slot="header" slot-scope="scope">
            <div class="title"><img src="../../../assets/medium/title-remark.png" class="title-icon" alt=""> 超链接</div>
          </template>
          <template slot-scope="scope">
            <div class="name">
              <ToolTip v-if="scope.row.hyperlinks && scope.row.hyperlinks.indexOf('http') >= 0" :content="scope.row.hyperlinks">
                <a :href="scope.row.hyperlinks" target="_blank" class="remarks links">点击跳转</a>
              </ToolTip>
              <div v-else class="remarks">{{ scope.row.hyperlinks ||'--' }}</div>
              <img v-if="isShowEdit" :src="editRemark" class="remark-icon" alt="" @click="toEditLinksShow(scope.row.hyperlinks)">
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="!createOrder" align="left" label="附件" min-width="150">
          <template slot="header" slot-scope="scope">
            <div class="title"><img src="../../../assets/medium/title-file.png" class="title-icon" alt=""> 附件</div>
          </template>
          <template slot-scope="scope">
            <div class="name">
              <ToolTip v-if="scope.row.file && scope.row.file.indexOf('http') >= 0" :content="scope.row.fileName">
                <div
                  style="margin-right: 10px"
                  class="link-name overflowtext"
                  @click="downloadFile(scope.row.file, scope.row.fileName)">
                  {{ scope.row.fileName }}
                </div>
              </ToolTip>
              <div v-else>--</div>
              <Upload
                v-if="isShowEdit"
                :import-api="'/admin/medium/file/upload'"
                :hide-confirm="true"
                :show-file="!scope.row.file"
                btn-text="上传文件"
                class="upload-file"
                @upProgress="upProgress"
                @complateSetData="complateSetData" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <editMask ref="editInfoMask" input-type="textarea" @handelOk="handelEdit" />
  </div>
</template>
<script>
import ExportButton from '@/components/ExportButton';
import OrderText from '@/components/MediumPage/order/OrderText';
import { mapState } from 'vuex';
import { parseTime, downloadFile } from '@/utils';
import Upload from '@/components/MediumPage/uploadFile';
import { editOrderInfo } from '@/api/medium';
import editMask from '@/components/MediumPage/order/editPriceMask';
// img
import detailIcon from '@/assets/medium/go_detail_icon.png';
import editRemark from '@/assets/medium/edit-remark.png';
import ElMessage from '@/utils/message';

// userAuthType:  // 1: 销售 2:媒介 3:管理员
// data.status: 1、待确认，2、执行中，3、已完成 4、已关闭
// 待确认：显示选择条数、导出按钮、提交、关闭
// 执行中：导出按钮
// 已完成：导出按钮
// 已关闭：无
export default {
  name: 'MediumOrderItem',
  components: { ExportButton, OrderText, Upload, editMask },
  filters: { parseTime },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    headerStyle: {
      type: Object,
      default: () => {
        return {
          backgroundColor: ''
        };
      }
    },
    isShowBtn: {
      type: Boolean,
      default: false
    },
    allCheck: {
      type: Boolean,
      default: false
    },
    selectNum: {
      type: Number,
      default: 0
    },
    selectTotalUser: {
      type: Array,
      default: () => {
        return [];
      }
    },
    createOrder: {
      type: Boolean,
      default: false
    },
    needPadding: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      detailIcon, editRemark,
      color: ['#f6a336', '#56a746', '#999999', '#999999'],
      mediumBtnStyle: {
        color: '#406EFF',
        borderRadius: '4px',
        textAlign: 'center',
        backgroundColor: '#fff',
        fontSize: '12px',
        height: '28px',
        border: '1px solid #406EFF',
        marginRight: '0px',
        padding: '0 20px',
        fontWeight: 'bold',
        cursor: 'pointer'
      },
      exportParams: {
        ids: '',
        orderNum: ''
      }
    };
  },
  computed: {
    ...mapState({
      'userAuthType': state => state.medium.userAuthType, // 1: 销售 2:媒介 3:管理员
      'showMobilePage': state => state.app.showMobilePage
    }),
    isSaleUser() {
      return this.userAuthType === 1;
    },
    isMediumUser() {
      return this.userAuthType === 2;
    },
    isAdminUser() {
      return this.userAuthType === 3;
    },
    orderStatus() {
      // data.status: 1、待确认，2、执行中，3、已完成 4、已关闭
      return Number(this.data.status);
    },
    // 显示多选框的规则: 销售或管理员，且订单状态为待确认
    isShowCheck() {
      return (this.userAuthType === 1 || this.userAuthType === 3) && (this.orderStatus === 1 || this.orderStatus === 2 || this.orderStatus === 3);
    },
    checked: {
      get: function() {
        return this.allCheck;
      },
      set: function(type) {
        this.$emit('setChecked', type);
      }
    },
    isDetail() {
      return this.isShowBtn;
    },
    isShowEdit() {
      return (this.userAuthType === 1 || this.userAuthType === 3) && this.orderStatus === 1 && !this.createOrder;
    }
  },
  methods: {
    downloadFile,
    goDetail(id) {
      const routeUrl = this.$router.resolve({
        name: 'ConsultOrderDetail',
        params: { id }
      });
      window.open(routeUrl.href, '_blank');
    },
    // 导出excel前调用的方法
    beforeExport() {
      this.$emit('getSelectUser');
      const ids = [];
      if (this.selectTotalUser.length > 0) {
        this.selectTotalUser.forEach(i => {
          ids.push(i.id);
        });
        this.exportParams.orderNum = this.data.orderNum;
        this.exportParams.ids = ids.join(',');
        this.$refs.exportButton.btnExport(this.exportParams);
      } else {
        this.$message({ type: 'warning', message: '请选择要导出的达人' });
      }
    },
    completeExport() {
      this.exportLoading = false;
      this.$emit('getData');
    },
    upProgress() {},
    async complateSetData({ data, fileName }) {
      const url = typeof data === 'string' ? data : data.url;
      const params = {
        type: 4,
        fileName,
        file: url,
        orderNum: this.data.orderNum,
        version: this.data.version
      };
      const result = await editOrderInfo(params);
      if (result.code === 200) {
        this.$emit('getData');
      } else {
        this.$message({ type: 'error', message: result.message });
      }
    },
    toEditShow(value) {
      this.$refs.editInfoMask.toEditRemarks(this.data, value, '备注', 1);
    },
    toEditLinksShow(value) {
      this.$refs.editInfoMask.toEditLinks(this.data, value, '超链接', 5);
    },
    toEditRequireContent(value) {
      this.$refs.editInfoMask.toEditContent(this.data, value, '需求内容', 2);
    },
    async handelEdit({ data, key, value }) {
      const params = {
        type: data.type,
        fileName: data.fileName,
        file: data.file,
        orderNum: data.orderNum,
        version: data.version,
        remarks: data.remarks,
        content: data.content,
        hyperlinks: data.hyperlinks
      };

      if (key === 'content') {
        if (value === '') {
          ElMessage.warning('请输入需求内容');
          return;
        }
        if (value !== '' && value.length > 500) {
          ElMessage.warning('请输入小于500个字的需求内容');
          return;
        }
        params.content = value;
      } else if (key === 'hyperlinks') {
        if (value !== '' && value.length > 500) {
          this.$message({ type: 'warning', message: '请输入小于500个字的超链接' });
          return;
        }
        params.hyperlinks = value;
      } else {
        if (value !== '' && value.length > 500) {
          this.$message({ type: 'warning', message: '请输入小于500个字的备注' });
          return;
        }
        params.remarks = value;
      }
      try {
        const result = await editOrderInfo(params);
        this.$refs.editInfoMask.init();
        if (result.code === 200) {
          this.$emit('getData');
        } else {
          this.$message({ type: 'error', message: result.message });
        }
      } catch (error) {
        this.$refs.editInfoMask.init();
      }
    },
    selectAll(e) {
      this.$emit('selectAll', e);
    },
    createOrderBatch() {
      this.$emit('createOrderBatch');
    }
  }
};
</script>
<style lang="scss" scoped>
.need-pd {
  padding: 24px 24px 0;
}
.order-list-item {
  background-color: #fff;
  .upload-file {
    position: relative;
    top: 2px;
  }
  .order-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px dashed #EBEEFD;
    background-color: #fff;
    .content {
      font-size: 14px;
      margin-right: 30px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:#999;
      @media screen and (max-width: 1250px) {
        &.content-1250 {
          width: 170px;
        }
      }
    }
    .resource-content {
      margin-left: 30px;
      @media screen and (max-width: 1250px) {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .go-detail {
      cursor: pointer;
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(64,110,255,1);
      display: flex;
      align-items: center;
      img {
        width: 16px;
        height: 16px;
        margin-left: 12px;
      }
    }
    .btn-container {
      display: flex;
      align-items: center;
      white-space: nowrap;
      .select-text {
        font-size: 12px;
        color: #515151;
        margin-right: 20px;
      }
      .btn {
        color: #406eff;
        border-radius: 4px;
        text-align: center;
        background-color: #fff;
        border: 1px solid #406eff;
        font-size: 12px;
        height: 28px;
        margin-left: 10px;
        padding: 0 20px;
        font-weight: bold;
        line-height: 27px;
        cursor: pointer;
        &.danger {
          border: 1px solid #EFF3FB;
          background-color: #EFF3FB;
        }
      }
    }
  }
  .order-table {
    display: flex;
    background-color: #fff;
    &.border-bottom {
      border-bottom: 1px solid #EBEEFD;
    }
    .title {
      width: 100%;
      display: flex;
      align-items: center;
      color: #686565;
      font-weight: 500;
      font-size: 13px;
      .title-icon {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
    }
    .link-name {
      cursor: pointer;
      display: inline-block;
      color: #333;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:hover{
        color: #406eff;
      }
      .el-icon-link {
        font-size: 12px;
      }
    }
    .name {
      width: 100%;
      display: flex;
      align-items: center;
      // min-height: 90px;
      color: #333;
      font-weight: 500;
      font-size: 15px;
      font-family:PingFangSC-Medium,PingFang SC;
      word-break:break-all;
    }
    & ::v-deep {
      .el-table {
        &::before {
          background-color: transparent;
        }
      }
      .order-table-row {
        &:hover {
          td {
            background: #fff;
          }
        }
      }
      .medium-order-table-header-cell {
        border-bottom: none;
        padding-top: 24px;
      }
    }
  }
}
.order-checkbox {
  & ::v-deep {
    .el-checkbox__label {
      position: relative;
      top: 1px;
      font-size: 13px;
      line-height: 13px;
    }
  }
}
.empty {
  flex:1;
}

.overflowtext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break:break-all;
}
.remarks {
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-all;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  line-clamp: 5;
  -webkit-line-clamp: 5;
  font-size: 14px;
  line-height: 1.5;
  color: #666666;
  font-weight: 400 !important;
  font-family:PingFangSC-Regular,PingFang SC;
}
.remark-icon {
  margin-left: 5px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.create-order {
  width:120px;
  height:32px;
  background:rgba(64,110,255,1);
  border-radius:4px;
  color: #fff;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  @media screen and (max-width: 1240px) {
    margin-right: 40px;
  }
}
.creat-order-table {
  margin-bottom: 12px;
  .name {
    min-height: 36px!important;
  }
}
.links {
  color: #406eff;
  cursor: pointer;
}
</style>
